<template>
  <div id="linechart">
    <div id="line"></div>
    <div id="lineData">
      <template>
        <el-table :data="lineData" height="250" style="width: 100%;">
          <el-table-column prop="date" label="日期" align="center" header-align="center"></el-table-column>
          <el-table-column prop="close" label="食物"></el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>
<script>
import * as d3 from 'd3'
import {AreaLineChart} from './AreaLineChart'
export default {
  data () {
    return {
      lineData: [],
      lineChart: {},
      itemsName: []
    }
  },
  mounted () {
    this.lineChart = new AreaLineChart('line')
    this.setLineData()
  },
  computed: {
    lineDataS: {
      get: function () {
        let showData = ''
        for (let i = 0; i < this.lineData.length; ++i) {
          showData += this.lineData[i].toString() + '\n'
        }
        return showData
      }
    }
  },
  methods: {
    setLineData () {
      d3.csv('./static/data/areaLine.csv', data => {
        this.lineData = data
        this.lineChart.data = JSON.parse(JSON.stringify(this.lineData))
        this.lineChart.divId = 'line'
        this.lineChart.itemsName = this.itemsName
        this.lineChart.xLabel = '时间'
        this.lineChart.yLabel = '$'
        this.lineChart.title = 'lineChart'
        this.lineChart.draw()
      })
    }
  }
}
</script>
<style scoped>
#linechart {
    height: 100%;
    width: 100%;
}
#line {
    height: 70%;
    width: 100%;
}
#lineData {
    height: 30%;
    width: 100%;
}
</style>
